<template>
  <el-dialog :visible.sync="visible" :close-on-click-modal="false">
    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-position="right" label-width="100px" style="width: 500px; margin-left:50px;">
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="dataForm.username" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item v-if="!dataForm.userId" label="用户密码" prop="password">
          <el-input v-model="dataForm.password" type="password" placeholder="请输入用户密码" />
        </el-form-item>
        <el-form-item v-if="!dataForm.userId" label="确认密码" prop="password2">
          <el-input v-model="dataForm.password2" type="password" placeholder="请再次输入用户密码" />
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
          <el-input v-model="dataForm.mobile" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="dataForm.email" placeholder="请输入邮箱" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataForm.userId?updateSubmit():addSubmit()">提交</el-button>
      </div>
  </el-dialog>
</template>

<script>
import { addUser, updateUser } from '@/api/user'

export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
      if (!value) {
        return callback(new Error('电话号码必填'))
      }
      setTimeout(() => {
        // Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
        // 所以我就在前面加了一个+实现隐式转换

        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式不正确'))
          }
        }
      }, 100)
    }
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!value) {
        // return callback(new Error('邮箱不能为空'))
        return callback()
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱格式'))
        }
      }, 100)
    }
    return {
      visible: false,
      dataForm: {
        username: '',
        password: '',
        mobile: '',
        email: '',
      },
      rules: {
        username: [{ required: true, message: '用户名称必填', trigger: 'change' }],
        password: [{ required: true, message: '用户密码必填', trigger: 'change' }],
        password2: [{ required: true, message: '用户密码必填', trigger: 'change' }],
        mobile: [{ validator: checkPhone, required: true, trigger: 'blur' }],
        email: [{ validator: checkEmail, required: true, trigger: 'blur' }],
      }
    }
  },
  methods: {
    init(row) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.dataForm = {
          username: '',
          password: '',
          mobile: '',
          email: '',
        }
        if(row) {
          this.dataForm = Object.assign({}, row)
        }
      })
    },
    addSubmit() {
      if(this.dataForm.password!=this.dataForm.password2) {
        this.$notify({
          message: '两次密码输入不一致',
          type: 'error',
          duration: 2000
        })
        return
      }
      addUser({
        ...this.dataForm
      }).then(res => {
        if(res.code == 0) {
          this.$notify({
            message: res.msg,
            type: 'success',
            duration: 2000
          })
          this.visible = false
          this.$emit('closeOpen')
        }
      })
    },
    updateSubmit() {
      if(this.dataForm.password!=this.dataForm.password2) {
        this.$notify({
          message: '两次密码输入不一致',
          type: 'error',
          duration: 2000
        })
        return
      }
      updateUser({
        ...this.dataForm
      }).then(res => {
        if(res.code == 0) {
          this.$notify({
            message: res.msg,
            type: 'success',
            duration: 2000
          })
          this.visible = false
          this.$emit('closeOpen')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
